
import { useState } from "react"
import { Audio } from "../dComponent"
import audios from '../audio/audio.json'
function Paudio(props){
    let [url, setUrl] = useState(audios.list[0].href)
    let [title, setTitle] = useState(audios.list[0].title)
    let [index, setIndex] = useState(0)
    let [audioArr] = useState(audios.list)
    return(
        <div className="page">
            <h2>音频播放-开发中</h2>
            <div className="flexBox" style={{width:'100%'}}>
                <Audio
                    src={url}
                    title={title}
                    autoPlay
                    controls
                    next={()=>{
                        let nextIndex = (index + 1 === audioArr.length) ? 0 : index + 1
                        // console.log(nextIndex)
                        setTitle(audioArr[nextIndex].title);
                        setUrl(audioArr[nextIndex].href);
                        setIndex(nextIndex)
                    }}
                />    
            </div>
            <br/>
            <div>
                <h2>播放列表</h2>
                {
                    audioArr?.map(val=>{
                        return <p style={{cursor:'pointer'}} onClick={()=>{
                          setTitle(val.title)
                          setUrl(val.href)  
                        }} key={val.title}>{val.title}</p>
                    })
                }
            </div>
        </div>
    )
}
export default Paudio